<template>
    <view class="wifi-page">
        <!-- WiFi图标 -->
        <view class="wifi-icon">
            <image
                src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/sjrz/20250404/a65cab697acd4adbe8d536d2e26dfc70.png"
                mode="aspectFit"></image>
        </view>
        <!-- 连接按钮 -->
        <view class="connect-btn" @tap="connectWifi">
            连接
        </view>
        
        <!-- 返回首页按钮 -->
        <view class="back-btn" @tap="goHome">
            返回首页
        </view>
    </view>
</template>

<script setup>
const connectWifi = () => {
    uni.showLoading({
        title: '连接中...'
    });

    uni.startWifi({
        success: () => {
            uni.connectWifi({
                SSID: '17010001',
                password: 'lyp82nlf',
                success: () => {
                    uni.hideLoading();
                      uni.showToast({
                        title: '连接成功',
                        icon: 'success'
                      });
                },
                fail: (error) => {
                    uni.hideLoading();
                    uni.showToast({
                        title: '连接失败',
                        icon: 'error'
                    });
                    console.error('WiFi连接失败:', error);
                }
            });
        },
        fail: (error) => {
            uni.hideLoading();
            uni.showToast({
                title: '初始化失败',
                icon: 'error'
            });
            console.error('WiFi初始化失败:', error);
        }
    });
};

const goHome = () => {
    uni.switchTab({
        url: '/pages/index/home'
    });
};
</script>

<style lang="scss" scoped>
.wifi-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(135deg, #f6f8fc 0%, #e9f1f9 50%, #d5e6f3 100%);
    padding: 60rpx 30rpx;
}

.wifi-icon {
    width: 500rpx;
    height: 500rpx;
    margin: 15vh 0 100rpx;

    image {
        width: 100%;
        height: 100%;
    }
}

.wifi-info {
    text-align: center;
    margin-bottom: 50rpx;

    .wifi-name {
        font-size: 40rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 20rpx;
    }

    .wifi-desc {
        font-size: 28rpx;
        color: #666;
    }
}

.connect-btn {
    width: 200rpx;
    height: 200rpx;
    border-radius: 50%;
    background: #e0e5ec;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #041a36a9;
    font-size: 30rpx;
    font-weight: 700;
    // letter-spacing: 10rpx;
    box-shadow:
        9rpx 9rpx 16rpx rgba(163, 177, 198, 0.6),
        -9rpx -9rpx 16rpx rgba(255, 255, 255, 0.5);

    &:active {
        box-shadow:
            inset 9rpx 9rpx 16rpx rgba(163, 177, 198, 0.6),
            inset -9rpx -9rpx 16rpx rgba(255, 255, 255, 0.5);
        transform: scale(0.98);
    }
}

.back-btn {
    position: fixed;
    bottom: 10vh;
    width: 600rpx;
    height: 80rpx;
    background: #e0e5ec;
    border-radius: 40rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #041a36a9;
    font-size: 28rpx;
    font-weight: 500;
    box-shadow:
        6rpx 6rpx 12rpx rgba(163, 177, 198, 0.6),
        -6rpx -6rpx 12rpx rgba(255, 255, 255, 0.5);

    &:active {
        box-shadow:
            inset 6rpx 6rpx 12rpx rgba(163, 177, 198, 0.6),
            inset -6rpx -6rpx 12rpx rgba(255, 255, 255, 0.5);
        transform: scale(0.98);
    }
}
</style>